

<template>
    <tm-app class="groupMembers" bgImg="f5">
        <!-- <image
            class="psa"
            style="width:750rpx;height:834rpx;top:0;left:0;right:0;z-index:1;"
            src="../../static/bg1.jpg"
            mode=""
        ></image> -->
        <view
            style="position:fixed;z-index:100;background:#fff;width:750rpx;top:0;left:0;"
            :style="{ height: systemInfo.statusBarHeight + 'px' }"
        ></view>
        <view
            class="slim_header d-flex a-center j-center"
            style="position: fixed; z-index: 100"
            :style="{ top: systemInfo.statusBarHeight + 'px' }"
        >
            <view class="left_box" @tap="goBack">
                <image src="/static/center/back.png" class="back"></image>
            </view>
            <view class="title d-flex a-center j-between">{{ titleText }}</view>
            <view class="right_box" style="font-size:30rpx;color:#333;font-weight:400;">
                <text style="margin-right:4rpx;">已学</text>
                {{readedNum}}/{{total}}
                <!-- <image src="/static/center/dian.png" class="dian"></image> -->
            </view>
        </view>

        <view
            class="content"
            :style="{ top: `calc(100rpx + ${systemInfo.statusBarHeight}px)` }"
        >
            <pullScroolView
                class="scroll-all"
                ref="scroll"
                :back-top="false"
                :pullDown="refresh"
                :pullUp="scrolltolower"
            >
                <view class="content-table-row d-flex d-r psr" v-for="article in articleList" @tap="goArticleDetail(article)">
                    <image
                        class="table-row-image"
                        mode="aspectFill"
                        :src="article.coverImg||'/static/zw1.jpg'"
                    ></image>
                    <view
                        class="table-row-info d-flex d-c"
                    >
                        <view class="row-info-title d-flex d-r psr">
                            <view class="guanfang" v-if="article.isSystem">
                                <text class="text">官方</text>
                            </view>
                            <text v-if="article.isSystem">
                                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            </text>
                            <text>{{article.title}}</text>
                        </view>
                        <view class="row-info-data d-flex d-r a-center j-between">
                            <view class="d-flex a-center">
                                <view
                                    v-if="article.isHot"
                                    class="info-data-heat d-flex d-r a-center j-center"
                                >
                                    <image
                                        class="data-heat-image"
                                        src="@/static/image/plan-heat.png"
                                    ></image>
                                    <text class="data-heat-text">热文</text>
                                </view>
                                <text
                                    class="icon icon-yanjing-"
                                    style="color: #999999; font-size: 30rpx"
                                ></text>
                                <text class="info-data-browse">{{article.pageView}}</text>
                            </view>

                        </view>
                    </view>

                    <view v-if="isRead(article.id)" class="not_read d-flex a-center j-center">
                        <image class="learned" src="/static/image/learned.png"></image>
                    </view>
                </view>
                <view class="heightBox"></view>
            </pullScroolView>
        </view>
    </tm-app>
</template>

<script setup lang="ts">
import { ref, reactive, nextTick, computed } from "vue";
import { onReady, onShow, onLoad, onUnload,onPageScroll } from "@dcloudio/uni-app";
import { userData as userDataStore } from "@/store/userData";
import { systemInfo as systemInfoStore } from "@/store/systemInfo";
import { getArticleDetail, getArticleList } from "@/api/api";
import { setGroupMemberNameCard } from "@/hooks/imHooks";
import { config as configStore } from "@/store/config";
import { checkSwear } from "@/utils/utils";
import { readArticle } from "@/store/readArticle"

onPageScroll((res) => {
    const scrollTop = res.scrollTop;
    if(res.scrollTop===0){
        backTop();
        setTimeout(()=>{
            uni.pageScrollTo({scrollTop:100});
        },100)
    }
});

const backTop = ()=>{
    scroll.value.onBackTop();
}


const readArticleStore = readArticle();
const type = ref(null)

const groupId = ref("");
const titleText = ref("瘦身知识");

const readedNum = computed(()=>{
    let num = 0;
    readArticleStore.readed.forEach(item=>{
        if(item.startsWith(`${type.value}-`)){
            num++;
        }
    })

    return num
})

const articleList = ref([]);
const articleDetail = ref({});

const params = {
    page: 1,
    rows: 10,
    type: 1,
    total: 0,
};

const total = ref(0);

const goBack = () => {
    uni.navigateBack();
};

const goArticleDetail = (article)=>{
    uni.navigateTo({
		url:`/pages/article/article?id=${article.id}`
	});
}



const checkNick = () => {
    checkSwear(nickName.value, true);
};

const userData: any = userDataStore();

const systemInfo: any = systemInfoStore();

const bool = ref(false);
const updateLoading = ref(false);

const nickName = ref("");

const checkLength = (maxLength: number) => {
    let content = nickName.value.trim();
    let str = "";
    let len = 0;
    for (var i = 0; i < content.length; i++) {
        //正则表达式判断中文
        if (/[\u4e00-\u9fa5]/.test(content[i])) {
            len += 2;
        } else {
            len++;
        }

        if (len <= maxLength) {
            str += content[i];
        }
    }
    nextTick(() => {
        nickName.value = str;
    });
};

const SetGroupMemberNameCard = async () => {
    if (updateLoading.value) {
        return;
    }

    if (!checkSwear(nickName.value)) {
        uni.showToast({
            icon: "none",
            title: "昵称包含敏感词,请重新输入",
            duration: 1500,
        });
        return;
    }

    updateLoading.value = true;
    uni.showLoading();
    const res: any = await setGroupMemberNameCard({
        groupID: groupId.value,
        userID: userData.id,
        nameCard: nickName.value,
    });
    const { code, data } = res;
    updateLoading.value = false;
    if (code !== 0) {
        uni.hideLoading();
        uni.showToast({
            icon: "none",
            title: "修改群昵称失败,请稍后再试",
            duration: 1500,
        });
        return;
    }

    setTimeout(() => {
        uni.hideLoading();
        uni.showToast({
            icon: "none",
            title: "修改成功",
            duration: 1500,
        });
        goBack();
    }, 500);
};

const GetArticleDetail = async (id: any) => {
    const res = await getArticleDetail({
        id: "5f01b01746424935a4352607703e0b20",
    });

    const nodes = `<div class="ql-container ql-editor">${res.data.content}</div>`;

    res.data.nodes = nodes;
    articleDetail.value = res.data;
};

const scroll = ref(null);

const refresh = async () => {
    params.page = 1;
    params.total = 0;
    await GetArticleList(true).catch(() => {});

    setTimeout(() => {
        scroll.value.success();
    }, 500);
};

const scrolltolower = async () => {
    await GetArticleList().catch(() => {});
};

const GetArticleList = async (refesh: boolean) => {

    if (params.total && articleList.value.length >= params.total) {
        return;
    }

    const res = await getArticleList(params).catch(()=>{
        scroll.value.success();
    });
    const { flag, data } = res;
    if (refesh) {
        articleList.value = data.list;
    } else {
        articleList.value.push(...data.list);
    }
    if (data.hasNextPage) {
        params.page = data.nextPage;
    }
    params.total = data.total;
    total.value = data.total;
};

const isRead = computed(() => (id: string) => {
    return readArticleStore.readed.includes(`${type.value}-${id}`)

});

onReady(() => {});

onLoad((option: any) => {
    setTimeout(() =>{
        uni.pageScrollTo({scrollTop:100});
    },100)
    if(option.title){
        titleText.value = option.title;
    }
    if(option.type){
        type.value = option.type;
        params.type = option.type;
    }
    GetArticleList();
});

onUnload(() => {});

onShow(() => {});
</script>

<style lang="scss">
@import url("@/assets/scss/quill.scss");
</style>

<style lang="scss" scoped>
.groupMembers {
    width: 750rpx;
    height: calc(100vh + 1px);
    .btn_main {
        border-radius: 50rpx;
    }
    .content {
        position: fixed;
        width: 750rpx;
        left: 0;
        right: 0;
        padding-top: 20rpx;
        bottom: 0;
        .notice {
            background: #f5f5f5;
            padding: 20rpx;
            border-radius: 20rpx;
        }

        .heightBox {
            height: env(safe-area-inset-bottom);
            min-height: 20rpx;
        }

        .content-table-row {
            padding: 20rpx;
            background: #fff;
            width: 710rpx;
            height: 180rpx;
            margin: 0 auto;
            border-radius: 10rpx;
            margin-bottom:10rpx;
            .not_read {
                position: absolute;
                bottom: 7rpx;
                right: 12rpx;
                width: 89rpx;
                height: 89rpx;
                .learned{
                    width:89rpx;
                    height:89rpx;
                }
            }
            .guanfang{
                position: absolute;
                top:5rpx;
                width: 60rpx;
                height: 32rpx;
                background: #D2F4E9;
                border-radius: 4rpx;
                display: flex;
                align-items: center;
                justify-content: center;
                margin-left:8rpx;



                .text{
                    font-size:20rpx;
                    color:#1DC691;
                }
            }
            .table-row-image {
                width: 220rpx;
                height: 140rpx;
                border-radius: 10rpx;
            }
            .table-row-info {
                padding-left: 10rpx;
                .row-info-title {
                    width: 430rpx;
                    font-size: 28rpx;
                    font-family: PingFangSC, PingFang SC;
                    font-weight: 600;
                    color: #333333;
                    line-height: 42rpx;

                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    overflow: hidden;
                    -webkit-line-clamp: 2;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }
                .row-info-data {
                    margin-top:20rpx;

                    .info-data-heat {
                        margin-right: 26rpx;
                        width: 80rpx;
                        height: 30rpx;
                        // background-image: linear-gradient(
                        //     to left,
                        //     #ffca2a,
                        //     #f50000
                        // );
                        background-color:#1DC691;
                        border-radius: 15rpx;
                        .data-heat-image {
                            width: 16rpx;
                            height: 18rpx;
                        }
                        .data-heat-text {
                            padding-left: 4rpx;
                            font-size: 20rpx;
                            font-family: PingFangSC, PingFang SC;
                            font-weight: 500;
                            color: #ffffff;
                        }
                    }
                    .info-data-browse {
                        padding-left: 9rpx;
                        font-size: 22rpx;
                        font-family: PingFangSC, PingFang SC;
                        font-weight: 400;
                        color: #666666;
                    }
                }
            }
        }
    }
}
</style>
